<template>
  <div class="approve-business-card-total">
    <el-card :class="'approve-business-card-' + index">
      <div>
        <div slot="header" class="clearfix card-box-header">
          <span>第{{ index + 1 }}审批节点</span>
          <el-button
            v-if="index + 1 == system.approvePoints"
            style="float: right; padding: 3px 0; zindex: 999"
            type="text"
            @click="removeItem(index)"
            >x</el-button
          >
        </div>
        <div class="text item">
          <SelectApprovePerson :options="selectData" />
        </div>
      </div>
    </el-card>
    <img
      v-if="index != 3 && index != 0"
      :class="'approve-arrow-' + index"
      src="./line.png"
    />
    <img
      v-if="index == 3"
      :class="'approve-arrow-' + index"
      src="./arrow.png"
    />
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import SelectApprovePerson from "./approveSelect";
export default {
  components: { SelectApprovePerson },
  props: ["data", "index", "totalData"],
  data() {
    return {
      selectData: [
        {
          type: "selectApproves",
          multiple: true,
          label: "审批人",
          prop: "person" + this.index,
          value: this.data,
          onchange: (e) => {
            const data = {};
            data["resIds" + this.index] = e;
            this.$store.dispatch("system/updateSubmitContent", data);
          },
          option: this.$store.state.app.allUser,
        },
      ],
    };
  },
  computed: {
    ...mapState(["system", "app"]),
  },
  mounted() {},

  methods: {
    removeItem(i) {
      this.$store.dispatch(
        "system/setPoints",
        this.$store.state.system.approvePoints - 1
      );
      // 移除已选择的数据
      const data = {};

      data["resIds" + this.index] = null;

      this.$store.dispatch("system/updateSubmitContent", data);
      // 回调removeItem事件
      this.$emit("removeItem", i);
    },
  },
};
</script>

<style lang="sass"  >
.card-box-header
  padding: 10px
  margin: 0 0 10px 0
  background: #eee
  border-radius: 3px

.text
  font-size: 14px

.item
  margin-bottom: 18px

.approve-business-card-total
  display: block
  .el-card__body
    padding: 0
    box-shadow: 0px 1px 5px 0px rgba(7, 30, 75, 0.17)

.approve-business-card
  position: absolute

  &-0
    top: 0px
    left: 0px
    width: 325px
    height: 195px
    position: absolute
    margin: 10px

.approve-arrow-1
  position: absolute
  left: 180px
  top: 203px

.approve-business-card-1
  top: 295px
  left: 0px
  width: 325px
  height: 195px
  position: absolute
  margin: 10px

.approve-arrow-2
  position: absolute
  left: 180px
  top: 500px

.approve-business-card-2
  top: 588px
  left: 0px
  width: 325px
  height: 195px
  position: absolute
  margin: 10px

.approve-arrow-3
  position: absolute
  left: 335px
  top: 150px

.approve-business-card-3
  top: 0px
  left: 400px
  width: 325px
  height: 195px
  position: absolute
  margin: 10px

.approve-arrow-4
  position: absolute
  left: 580px
  top: 203px

.approve-business-card-4
  top: 295px
  left: 400px
  width: 325px
  height: 195px
  position: absolute
  margin: 10px

.clearfix:before,
.clearfix:after
  display: table
  content: ""

.clearfix:after
  clear: both
</style>
